<template>
	<div class="article-wrapper">
		<div class="article-container">
			<div class="article-header">
				<h1 class="article-title">{{ article.title }}</h1>
				<div class="article-meta">
					<div class="article-author">
						<img :src="article.url" alt="作者头像" class="author-avatar" />
						<span>{{ article.author }}</span>
					</div>
					<div class="article-info">
						<span class="article-date">{{ formatDate(article.time) }}</span>
						<span class="article-views">阅读 {{ article.views+1 }}</span>
						<span class="article-category">{{ article.tab }}</span>
					</div>
				</div>
			</div>
			<div class="article-content" v-html="article.content"></div>
		</div>
	</div>
</template>

<script setup>
	import {
		inject,
		onMounted
	} from 'vue';
	import axios from 'axios';

	// 从父组件注入article
	const article = inject('article');

	// 在挂载后为内容中的标题添加ID
	onMounted(() => {
		// 延迟执行，确保内容已渲染
		setTimeout(() => {
			addIdsToHeadings();
		}, 300);
		addviews();
	});

	// 为内容中的标题添加ID
	const addIdsToHeadings = () => {
		const articleContent = document.querySelector('.article-content');
		if (articleContent) {
			const headingElements = articleContent.querySelectorAll('h1, h2, h3, h4, h5, h6');
			headingElements.forEach((element, index) => {
				element.id = `heading-${index}`;
			});
		}
	};

	const formatDate = (timestamp) => {
		const date = new Date(timestamp);
		const year = date.getFullYear();
		const month = (date.getMonth() + 1).toString().padStart(2, '0');
		const day = date.getDate().toString().padStart(2, '0');
		return `${year}-${month}-${day}`;
	};
	
	function addviews(){
		const res = axios.post("/api/article/addViews", null, {
			params: {
				id: article.value.id
			}
		}, {
			headers: {
				'Content-Type': 'application/json' // 设置请求头为表单编码
			}
		});
		res
			.then(response => {
				console.log(response.data.msg);
			})
			.catch(error => {
				// 请求失败，处理错误
				if (error.response) {
					// 请求已发送，但服务器响应的状态码不在 2xx 范围内
					console.log('响应状态码:', error.response.status);
					console.log('响应数据:', error.response.data);
				} else if (error.request) {
					// 请求已发送，但没有收到响应
					console.log('没有收到响应:', error.request);
				} else {
					// 在设置请求时发生错误
					console.log('错误信息:', error.message);
				}
			});
	}
</script>

<style scoped lang="scss">
	.article-wrapper {
		width: 100%;
		padding: 20px;
		overflow-y: auto;
		height: 100%;
		box-sizing: border-box;
	}

	.article-container {
		max-width: 800px;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
	}

	.article-header {
		padding: 30px 40px;
		border-bottom: 1px solid #eee;
		background-color: #fafafa;
	}

	.article-title {
		font-size: 28px;
		font-weight: bold;
		color: #333;
		margin-bottom: 20px;
		line-height: 1.4;
	}

	.article-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		color: #666;
	}

	.article-author {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.author-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		object-fit: cover;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.article-info {
		display: flex;
		gap: 15px;
	}

	.article-category {
		background-color: #f0f7ff;
		color: #3498db;
		padding: 2px 8px;
		border-radius: 4px;
		font-size: 12px;
	}

	.article-content {
		padding: 30px 40px 50px;
		line-height: 1.8;
		color: #444;
		letter-spacing: 0.3px;

		:deep(h1) {
			font-size: 24px;
			font-weight: bold;
			margin: 35px 0 25px;
			padding-bottom: 10px;
			border-bottom: 1px solid #eee;
			color: #333;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				bottom: -1px;
				left: 0;
				width: 80px;
				height: 3px;
				background-color: #3498db;
				border-radius: 3px;
			}
		}

		:deep(h2) {
			font-size: 20px;
			font-weight: bold;
			margin: 30px 0 20px;
			color: #444;
			position: relative;
			padding-left: 15px;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 4px;
				background-color: #3498db;
				border-radius: 2px;
			}
		}

		:deep(h3) {
			font-size: 18px;
			font-weight: bold;
			margin: 25px 0 15px;
			color: #555;
		}

		:deep(p) {
			margin: 16px 0;
			overflow-wrap: break-word;
			color: #555;
		}

		:deep(a) {
			color: #3498db;
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}

		:deep(img) {
			max-width: 100%;
			height: auto;
			margin: 20px 0;
			border-radius: 6px;
			box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
		}

		:deep(blockquote) {
			border-left: 4px solid #3498db;
			padding: 12px 15px;
			margin: 20px 0;
			background-color: #f8f9fa;
			color: #666;
			border-radius: 0 4px 4px 0;
		}

		:deep(code) {
			background-color: #f5f5f5;
			padding: 2px 4px;
			border-radius: 3px;
			font-family: 'Courier New', Courier, monospace;
			font-size: 0.9em;
			color: #e74c3c;
		}

		:deep(pre) {
			background-color: #f5f5f5;
			padding: 15px;
			border-radius: 5px;
			overflow-x: auto;
			margin: 20px 0;

			code {
				background-color: transparent;
				padding: 0;
				color: #333;
			}
		}

		:deep(hr) {
			border: none;
			height: 1px;
			background-color: #eee;
			margin: 25px 0;
		}

		:deep(ul),
		:deep(ol) {
			margin: 18px 0;
			padding-left: 24px;

			li {
				margin-bottom: 10px;
				position: relative;
				line-height: 1.6;
				color: #555;

				h3 {
					margin: 15px 0 8px;
					color: #444;
				}

				p {
					margin: 8px 0;
				}

				ul,
				ol {
					margin: 10px 0;
				}
			}
		}

		:deep(ul) {
			list-style-type: none;

			li {
				padding-left: 15px;

				&::before {
					content: '•';
					color: #3498db;
					font-weight: bold;
					position: absolute;
					left: -5px;
				}

				ul li::before {
					content: '◦';
					color: #777;
				}
			}
		}

		:deep(ol) {
			counter-reset: item;
			list-style-type: none;

			li {
				counter-increment: item;
				padding-left: 5px;

				&::before {
					content: counter(item) '.';
					color: #3498db;
					font-weight: bold;
					position: absolute;
					left: -18px;
				}
			}
		}

		:deep(strong) {
			font-weight: 600;
			color: #333;
		}
	}

	/* 适配滚动条样式 */
	.article-wrapper::-webkit-scrollbar {
		width: 6px;
	}

	.article-wrapper::-webkit-scrollbar-track {
		background: #f1f1f1;
	}

	.article-wrapper::-webkit-scrollbar-thumb {
		background: #ccc;
		border-radius: 3px;
	}

	.article-wrapper::-webkit-scrollbar-thumb:hover {
		background: #999;
	}
</style>